import React, { Component } from 'react'
import $http from '../../axios'
import BScroll from 'better-scroll'
import {Carousel, List} from 'antd-mobile'
import WrappedComponent from '../../setPlay/index'
import './newSong.less'
import Headnav from '../../components/head/headNav'
const Item = List.Item


var that;
class NewSong extends Component {
  constructor() {
    super()
    that = this;
    this.state = {
      scroll: '',
      title: 'NewSong',
      bannerList: [],
      imgHeight: 176,
      songList: []
    }
    $http.get('/proxy/?json=true').then(res => {
      that.setState({
          bannerList : res.data.banner,
          songList : res.data.data,
          title : 'Change'
      })
      console.log('请求的结果',res)
    })
  }
  componentDidUpdate() {
    if(that.state.scroller){
          that.state.scroller.refresh()
      }else{
          that.state.scroller = new BScroll(that.refs.newsWrpper,{
              click:true,
              scrollbar:true
          });
      }
  }

  render() {
    var songList = this.state.songList && this.state.songList.length > 0 && this.state.songList.map((item,index) => {
      return (<Item className="rankItem" arrow = "horizontal" key = {index} onClick={this.props.play.bind(this,this.state.songList,index,item.hash)} multipleLine>{item.filename}</Item>)
    })
    var carousel = this.state.bannerList.map((item, index) => {
      return (
        <a key={index} href="/" style={{display: 'inline-block', width: '100%', height: this.state.imgHeight}}>
          <img src={item.imgurl} alt ="" style={{width: '100%', verticalAlign: 'top'}} onLoad={() => {
            window.dispatchEvent(new Event('resize'));
            this.setState({ imgHeight: 'auto' });
          }}
          />
        </a>
      )
    })
    return (
      <div>
        <Headnav path={this.props.location.pathname}/>
        <div className="newSong" ref="newsWrpper">
          <div className="wrap">
            <Carousel 
             autoplay 
             infinite 
             selectedIndex={1} 
             autoplayInterval={3000} 
             resetAutoplay={false} 
             beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
             afeterChange={index => console.log('slide to', index)}
             >
              {carousel}
             </Carousel>
             <List className="my-list">
                {songList}
             </List>
          </div>
        </div>
      </div>
    )
  }
}
NewSong = WrappedComponent(NewSong)
export default NewSong